<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板html</title>
     <link rel="stylesheet" href="./model.css"/>

</head>
<body>
    
    <!-- 主题展示 -->
     <!-- 框架如下：一个大的展示内容的盒子，里面据内容分区第一次细化盒子，如个人信息处是一个盒子。
      而这个盒子包含文字信息和图片信息，就又生成了两个盒子 -->
 <div  class="displayer"> <!--内容展示区 -->
<div class="info"> <!--个人简介模块 -->
<h3 class="displayer-title">【个人信息】</h3> <!--内容的标题 -->
<div class="info-box">
 <div class="info-text"> <!--内容的文本区 -->
    <h3>姓名：谭艾玲</h3>
    <p>性别：女</p>
     <p>学校：西安科技大学</p>
    <p>学院：人工智能与计算机学院</p>
    <p>班级：计算机科学与技术2404班</p>
    <p>学号：24408030418</p>
    <p>邮箱：tal3628037962@163.com</p>
    
  </div>

   <div class="info-image"> <!--内容的图像区 -->
    <img src="./image_2.jpg" alt="">
    <img src="./image_5.jpg" alt="">
   </div>
 </div>
 <!-- 个人爱好 -->
<div class="hobby">
<h3 class="displayer-title">【个人爱好】</h3>
<div class="hobby-box">
    <span>写作</span>
    <span>绘画</span>
    <span>聊天</span>
    <span>看电影</span>
    <span>烹饪</span>
            </div>
        </div>
    </div>
</div>
 <div class="footer">
<p>
        设计制作:谭艾玲 Welcome to my website.
 </p>
</div>
</body>
</html>